<!-- 快递账单管理 -->
<template>
<div class="content-box">
  <FilterBox
    :labelWidth="120"
    :filterItemList="filterItemList"
    :filterData="filterData"
    @search="search"
    @clear="clear"
    @keep="keepHeaderList"
  >
    <template v-slot:order_uid>
      <Loadselect
        :select_value="'uid'"
        :select_label="'nickname'"
        :modalName="'order_uid'"
        :select_model="filterData.order_uid"
        :select_options="customeroptions"
        @selectBlur="selectBlur('order_uid')"
        @selectChang="LoadselectChange"
        :isLazy="true"
        @loadData="loadData"
        @filterDataFun="filterDataFun"
      >
      </Loadselect>
    </template>
  </FilterBox>
  <div class="tabsBox">
    <!-- <div @click="leftSlide" class="left-btn border-right">
        <i class="el-icon-d-arrow-left"></i>
    </div> -->
    <div class="scroll_wrapper" ref="wrapperCon">
        <div class="tabslist">
            <div
                :class="filterData.type === item.id ? 'tabsItem tabs-active' : 'tabsItem'"
                style="padding-right:5px"
                v-for="(item, index) in tabsList"
                :key="index"
                @click="changeTab(item)"
            >
                {{ item.name }}
            </div>
        </div>
    </div>
    <!-- <div @click="rightSlide" class="right-btn border-left">
        <i class="el-icon-d-arrow-right"></i>
    </div> -->
  </div>
  <MyTable
    :gridOptions="{checkboxConfig:{checkField: 'checked', trigger: 'row', highlight: true}}"
    :tableColumn="tableColumn"
    :tableData="tableData"
    :isOrder="false"
    @sendCheckBoxList="setCheckBox"
    >
    <template v-slot:content="scope">
      <span>{{ scope.row[scope.config.prop] }}</span>
    </template>
  </MyTable>
  <!-- 分页组件 -->

  <Pagination
    :menuTabsId="filterData.type"
    ref="pagination"
    :currentPage="pageinfo.page"
    :pageSize="pageinfo.limit"
    :total="pageinfo.number_all"
    :page_all="pageinfo.page_all"
    @pagination="SetPagination"
    @sendPushButton="pushButton"
  >
  </Pagination>

  <BillDetails
    ref="billDetails"
></BillDetails>
</div>
</template>

<script>
import BillDetails from "../ExpressDeliveryManagenment/ExpressOrderManagement_viewBill_billDetails";
export default {
  components: {
    BillDetails
  },
  data(){
    return{
      tabsList:[
        {id:1,name:this.$t('ExpressBillManagementLang.Shipping_bill')},
        {id:2,name:this.$t('ExpressBillManagementLang.Receipt_bill')},
      ],
      filterItemList:[
        // input输入框
        { label:this.$t('ExpressBillManagementLang.bill_num'),width:200, filterKey: 'bill_sn', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('ExpressOrderManagementLang.order_number'),width:200, filterKey: 'order_sn', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('ExpressCargoManagementLang.Package_number'),width:200, filterKey: 'package_sn', filterType: 'SearchInput', placeholderStr: null },
        // 日期选择器
        { label:this.$t('ExpressOrderManagementLang.statement_date'),width:200, filterKey: 'bill_date', filterType: 'SearchDate' },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.customer'),width:200, filterKey: 'order_uid', filterType: 'filter_slot'},
        // 下拉框
        { label:this.$t('ExpressBillManagementLang.pay_status'),width:200, filterKey: 'pay_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:[],label:'name_current',value:'lid'} },
      ],
      filterData:{
        page: "",
        limit: "30",
        order: "",

        
        bill_sn: "",
        order_sn: "",
        package_sn: "",
        bill_date:[],
        bill_date1: "",
        bill_date2: "",
        order_uid: "",
        pay_status: "",
        type:1,
      },
      loadSelectPageInfo:{
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      },
      customeroptions:[],
      payoptions:[],
      tableColumn: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressBillManagementLang.bill_num'),
          prop: "bill_sn",
          width: 180,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.order_number'),
          prop: "order_sn",
          width: 180,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.statement_date'),
          prop: "created_at",
          width: 180,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.customer'),
          prop: "order_uid_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Bill_amount'),
          prop: "discount_total_price",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressBillManagementLang.pay_status'),
          prop: "pay_status_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Creator'),
          prop: "creator_id_name",
          width: 120,
        },
      ],
      tableData: [],

      pageinfo: {
        page: 1,
        page_all: 1,
        limit: 30,
        number_all: 0,
      },
      sendDataArr:[],//多选框勾选集合
    }
  },
  computed: {
      tabsId() {
          return this.$store.state.tabsId;
      }
  },
  mounted(){
    this.getOptionsList()
    this.getHeaderList()
    this.getTableData()
  },
  methods:{
    loadData(){
      if(this.loadSelectPageInfo.page<this.loadSelectPageInfo.page_all){
        this.loadSelectPageInfo.page++
        this.$get("screenChilds",{name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
          this.customeroptions.push(...res.data)
        });
      }
    },
    filterDataFun(value){
      this.loadSelectPageInfo.page=1
      this.loadSelectPageInfo.keyword=value
      this.$get("screenChilds",{name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
        this.customeroptions = res.data;
        this.loadSelectPageInfo.page_all=res.pageinfo.page_all
      });
    },
    //自定义多选下拉框
    selectBlur(){
      this.loadSelectPageInfo={
        keyword:'',
        limit:100,
        page:1,
        page_all:10,
      }
      this.filterDataFun('')
    },
    LoadselectChange(obj){
      this.filterData[obj.name]=obj.value
    },
    // 获取下拉单列表
    async getOptionsList() {
      await this.$get("screenChilds",{name:this.loadSelectPageInfo.keyword,limit:this.loadSelectPageInfo.limit,page:this.loadSelectPageInfo.page}).then((res) => {
        this.customeroptions = res.data;
        this.loadSelectPageInfo.page_all=res.pageinfo.page_all
      });
      await this.$get("billSysItems").then((res) => {
        this.payoptions = res.data.bill_pay_type;
      });
      this.filterItemList=[
        // input输入框
        { label:this.$t('ExpressBillManagementLang.bill_num'),width:200, filterKey: 'bill_sn', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('ExpressOrderManagementLang.order_number'),width:200, filterKey: 'order_sn', filterType: 'SearchInput', placeholderStr: null },
        // input输入框
        { label:this.$t('ExpressCargoManagementLang.Package_number'),width:200, filterKey: 'package_sn', filterType: 'SearchInput', placeholderStr: null },
        // 日期选择器
        { label:this.$t('ExpressOrderManagementLang.statement_date'),width:200, filterKey: 'bill_date', filterType: 'SearchDate' },
        // 下拉框
        { label:this.$t('ExpressOrderManagementLang.customer'),width:200, filterKey: 'order_uid', filterType: 'filter_slot' },
        // 下拉框
        { label:this.$t('ExpressBillManagementLang.pay_status'),width:200, filterKey: 'pay_status', filterType: 'SearchSelect', placeholderStr: null, filterOptions: {options:this.payoptions,label:'name',value:'id'} },
      ]
    },
    //查询
    search(){
      this.getTableData()
    },
    //清空
    clear(){
      this.filterData.bill_sn= "",
      this.filterData.order_sn= "",
      this.filterData.package_sn= "",
      this.filterData.bill_date=[],
      this.filterData.bill_date1= "",
      this.filterData.bill_date2= "",
      this.filterData.order_uid= "",
      this.filterData.pay_status= "",
      this.getTableData()
    },
    // 获取表头组
    getHeaderList(){
      this.$get("get_th",{menu_id:this.tabsId}).then((res) => {
        if(!!res.data.th_json){
          this.tableColumn=JSON.parse(res.data.th_json)
        }
      });
    },
    //保存表头表头组
    keepHeaderList(){
        let params = new FormData();
        params.append("menu_id", this.tabsId);
        params.append("th_json", JSON.stringify(this.tableColumn));
        this.$postForm("save_th", params).then((res) => {
          
        });
    },
    // 更改分页
    SetPagination(data){
      this.filterData.page=data.page
      this.filterData.limit=data.limit
      this.pageinfo.page=data.page
      this.pageinfo.limit=data.limit
      this.getTableData()
    },
    pushButton(route) {


      if (route == "payBill") {
        if (JSON.stringify(this.sendDataArr) == "[]") {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          if (this.sendDataArr.filter(item=>{return item.pay_status===1}).length>0) {
            this.$message.warning(this.$t('ExpressBillManagementLang.message_pay_text1'));
          } else {
            this.$confirm(this.$t('ExpressBillManagementLang.sure_pay_bill'), this.$t('common.prompt'), {
                confirmButtonText: this.$t('common.confirm'),
                cancelButtonText: this.$t('common.cancel'),
            }).then(() => {
                let str=this.sendDataArr.map((obj)=>{return ""+obj.id}).join(",")
                let params = new FormData();
                params.append("ids", str);
                this.$postForm("payBill", params).then((res) => {
                  if(res.success){
                    this.$message.success(res.msg);
                    this.getTableData();
                  }
                });
            }).catch(() => {});
          }
        }
      } else if (route == "CancelPayment") {
        if (JSON.stringify(this.sendDataArr) == "[]") {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          if (this.sendDataArr.filter(item=>{return item.pay_status===0}).length>0) {
            this.$message.warning(this.$t('ExpressBillManagementLang.message_cancel_pay_text2'));
          } else {
            this.$confirm(this.$t('ExpressBillManagementLang.sure_cancel_pay'), this.$t('common.prompt'), {
                confirmButtonText: this.$t('common.confirm'),
                cancelButtonText: this.$t('common.cancel'),
            }).then(() => {
                let str=this.sendDataArr.map((obj)=>{return ""+obj.id}).join(",")
                let params = new FormData();
                params.append("ids", str);
                params.append("status", 0);
                this.$postForm("payBill", params).then((res) => {
                  if(res.success){
                    this.$message.success(res.msg);
                    this.getTableData();
                  }
                });
            }).catch(() => {});
          }
        }
      } else if (route == "delBill") {
        if (JSON.stringify(this.sendDataArr) == "[]") {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
          if (this.sendDataArr.filter(item=>{return item.pay_status===1}).length>0) {
            this.$message.warning(this.$t('ExpressBillManagementLang.message_warn_text'));
          } else {
            this.$confirm(this.$t('ExpressBillManagementLang.sure_del_bill'), this.$t('common.prompt'), {
                confirmButtonText: this.$t('common.confirm'),
                cancelButtonText: this.$t('common.cancel'),
            }).then(() => {
                let str=this.sendDataArr.map((obj)=>{return ""+obj.id}).join(",")
                let params = new FormData();
                params.append("ids", str);
                this.$postForm("delBill", params).then((res) => {
                  if(res.success){
                    this.$message.success(res.msg);
                    this.getTableData();
                  }
                });
            }).catch(() => {});
          }
        }
      } else if (route == "lookBill") {
        if (JSON.stringify(this.sendDataArr) == "[]"||this.sendDataArr.length!=1) {
          this.$message.warning(this.$t('common.message_warn_text'));
        } else {
            this.$refs.billDetails.init(this.sendDataArr[0]);
        }
      } else if (route == "export") {
        if(this.tableData.length===0){
          this.$message.warning(this.$t('common.noData'));
          return
        }
        this.$downloadCenterLoad('exportBills',this.filterData);
      }
    },
    // 获取表格数据
    getTableData(){
      this.$get("myBills", this.filterData).then((res) => {
        this.tableData = res.data;
        this.pageinfo = res.pageinfo;
        this.pageinfo.limit=Number(this.pageinfo.limit)
        this.sendDataArr=[]
      });
    },
    // 多选框勾选集合
    setCheckBox(data){
      this.sendDataArr=data
    },
    // 左箭头
    leftSlide() {
        // 保存滚动盒子左侧已滚动的距离
        let left = this.$refs.wrapperCon.scrollLeft;
        let num = 0;
        clearInterval(this.timer);
        this.timer = null;
        this.timer = setInterval(() => {
            //   !left:已经滚动到最左侧
            //   一次性滚动距离（可调节）
            if (!left || num >= 300) {
                // 停止滚动
                clearInterval(this.timer);
                this.timer = null;
                return;
            }
            // 给滚动盒子元素赋值向左滚动距离
            this.$refs.wrapperCon.scrollLeft = left -= 30;
            // 保存向左滚动距离（方便判断一次性滚动多少距离）
            num += 30;
        }, 20);
        // 20：速度（可调节）
    },
    // 右箭头
    rightSlide() {
        // 保存滚动盒子左侧已滚动的距离
        let left = this.$refs.wrapperCon.scrollLeft;
        // 保存元素的整体宽度
        let scrollWidth = this.$refs.wrapperCon.scrollWidth;
        // 保存元素的可见宽度
        let clientWidth = this.$refs.wrapperCon.clientWidth;
        let num = 0;
        clearInterval(this.timer);
        this.timer = setInterval(() => {
            // 已经滚动距离+可见宽度
            // left+clientWidth>=scrollWidth：滚动到最右侧
            // num>=300一次性滚动距离
            if (left + clientWidth >= scrollWidth || num >= 300) {
                clearInterval(this.timer);
                return;
            }
            // 给滚动盒子元素赋值向左滚动距离
            this.$refs.wrapperCon.scrollLeft = left += 30;
            // 保存向左滚动距离（方便判断一次性滚动多少距离）
            num += 30;
        }, 20);
        // 20：速度（可调节）
    },
    changeTab(data) {
      this.filterData.page=1
        this.filterData.type=data.id
        this.$refs.pagination.setSpecialBtn(data.id)
        this.getTableData()
    }
  }
}
</script>
<style scoped lang="less">
.tableBox {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/deep/.vxe-cell{
  padding-top: 5px;
  padding-bottom: 5px;
}


.tabsBox {
  margin-bottom: 20px;
    box-sizing: border-box;
    font-size: 14px;
    color: #444;
    display: flex;
    border: 1px solid #f1f1f1;
    cursor: pointer;
    .scroll_wrapper {
        width: calc(100% - 115px);
        height: 50px;
        overflow-x: scroll;
        margin: 0 5px;
        .tabslist {
            padding: 0 10px;
            height: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            .tabsItem {
                height: 28px;
                border: 1px solid #ccc;
                box-sizing: border-box;
                border-radius: 4px;
                padding: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                white-space: nowrap; //禁止文字换行
                position: relative;
                .close-btn {
                    position: absolute;
                    top: 7px;
                    right: 5px;
                    font-size: 14px;
                }
            }
            .tabs-active {
                color: #fff;
                background-color: #6c9ee5 ;
            }
        }
    }
}

.left-btn,
.right-btn {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
.border-left {
    border-left: 1px solid #ccc;
}
.border-right {
    border-right: 1px solid #ccc;
}
/*隐藏滚动条*/
.scroll_wrapper::-webkit-scrollbar {
    display: none;
}
</style>